<head><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
<meta charset=utf-8>
<style>
body { margin: 0px; }
canvas { width:100%; height:100%; overflow: hidden; }
</style>
<script type="text/javascript" src="../h3du_min.js"></script>
<script type="text/javascript" src="../extras/frame.js"></script>
<script type="text/javascript" src="../extras/path.js"></script>
<script type="text/javascript" src="demoutil.js"></script>
<script type="text/javascript" src="../extras/meshjson.js"></script>
<script type="text/javascript" src="pathutil.js"></script>
</head>
<body>
<canvas id=canvas></canvas>
<script id="demo">
/* global H3DU, pathFloor, pointMarch */
// <!--
/*
 Any copyright to this file is released to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/
 If you like this, you should donate
 to Peter O. (original author of
 the Public Domain HTML 3D Library) at:
 http://peteroupc.github.io/
*/

// Path taken from a public domain SVG icon, which was
// created by Jakub Steiner
var path = H3DU.GraphicsPath.fromString(
"M 44.155643,23.75 C 44.155643,45.413332 45.663332,43.905643 24,43.905643 2.3366679,43.905643 3.8443565,45.413332 3.8443565,23.75 3.8443565,2.0866679 2.3366679,3.5943565 24,3.5943565 c 21.663332,0 20.155643,-1.5076886 20.155643,20.1556435 z"
);
var curves = path.getCurves(0.2);
var scene = new H3DU.Scene3D(document.getElementById("canvas"));
scene.setClearColor("white");
var sub = new H3DU.Batch3D()
    .perspectiveAspect(45, 1, 1000)
    .setLookAt([22.5, 22.5 - 3 * 8, 1.2 * 50], [22.5, 22.5, 0], [0, 0, 1]);
var fc = new H3DU.FrameCounterDiv();
var group = new H3DU.ShapeGroup();
sub.getLights()
    .setDirectionalLight(0, [0, -3, 1.2], [1, 1, 1])
    .setDirectionalLight(1, [0, 3, 1.2], [0.6, 0.6, 0.6]);

var sphere = new H3DU.Shape(H3DU.Meshes.createSphere(0.2, 16, 8)).setColor("blue");
for(var i = 0; i < 50; i++) {
  group.addShape(sphere.copy());
}
sub.addShape(
    new H3DU.Shape(pathFloor(path)).setColor("#eeeeee"));
sub.addShape(group);

var timer = {};
H3DU.renderLoop(function(time) {
  "use strict";
  var t = H3DU.getTimePosition(timer, time, 1000);
  pointMarch(group, curves, t);
  fc.update();
  scene.render(sub);
});
// -->
</script>
</body>
